<template>
  <div>
    <el-carousel trigger="click" height="600px" arrow="never">
      <el-carousel-item v-for="(item,index) in bannerPic" :key="index">
        <div class="index-banner" :style="{'background':'url('+item.img+') top center no-repeat'}">
          <div class="container">
            <div class="left">
              <p class="item-title">{{item.title}}</p>
              <p class="d item-info" style="width: 40%;text-align: left">{{item.info}}</p>
              <a :href="item.link" class="check">查看详情</a>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="video-background" v-if="flag" @click="cVideo"></div>
    <div class="demo" v-show="flag">
      <img
        @click="cVideo"
        style="position:absolute;left:100%;top:-15px;z-index:10000"
        width="20px"
        src="./cha.png"
      />

      <div id="video"></div>
    </div>
    <div class="index-flow">
      <div class="container">
        <div class="flow">
          <div class="img-box">
            <img :src="index01" alt />
          </div>
          <p class="pc-vertical">发布任务</p>
        </div>
        <img :src="arrow" alt class="arrow" />
        <div class="flow">
          <div class="img-box">
            <img :src="index02" alt />
          </div>
          <p class="pc-vertical">支付款项</p>
        </div>
        <img :src="arrow" alt class="arrow" />
        <div class="flow">
          <div class="img-box">
            <img :src="index03" alt />
          </div>
          <p class="pc-vertical">平台通知大师进行抢单</p>
        </div>
        <img :src="arrow" alt class="arrow" />
        <div class="flow">
          <div class="img-box">
            <img :src="index04" alt />
          </div>
          <p class="pc-vertical">提交姓名</p>
        </div>
        <img :src="arrow" alt class="arrow" />
        <div class="flow">
          <div class="img-box">
            <img :src="index05" alt />
          </div>
          <p class="pc-vertical">提交姓名</p>
        </div>
      </div>
    </div>

    <div class="index-about-us index-block">
      <div class="ib-title">
        <p class="name">关于我们</p>
        <p class="desc">ABOUT US</p>
      </div>
      <div class="container">
        <div class="left">
          <p class="title">“猪爸爸”起名平台</p>
          <p class="desc">
            猪爸爸起名平台网隶属于哈尔滨玖零网络科技有限公司，是我们的梦想，也是我们展现价值的舞台，我们将认真对待每一位客户，如果您有宝贵的意见，请联系我们客服。我们希望多聆听您们的建议。
          </p>
          <a href="#" class="more">MORE+</a>
        </div>
        <div class="right" @click="videop">
          <img :src="video" alt class="bg" />
          <a class="pc-center">
            <img :src="play" alt class="pc-center" />
          </a>
          <span class="animation pc-center"></span>
        </div>
      </div>
    </div>

    <div class="index-adv index-block">
      <div class="ib-title">
        <p class="name">我们的优势</p>
        <p class="desc">OUR ADVANTAGE</p>
      </div>
      <div class="container">
        <div class="block">
          <img :src="index06" alt />
          <p class="nam">平台优势</p>
          <p class="desc">海量大师为你起名，创意新颖，多种选择权限！</p>
        </div>
        <div class="block">
          <img :src="index07" alt />
          <p class="nam">24小时提供服务</p>
          <p class="desc">7*24小时派单，不管你几点下单，下单后我们会马上通知平台师傅，进行起名！</p>
        </div>
        <div class="block">
          <img :src="index08" alt />
          <p class="nam">消息推送</p>
          <p class="desc">起名后会一个个名字推送，我们会通知你！</p>
        </div>
        <div class="block">
          <img :src="index09" alt />
          <p class="nam">拒绝敷衍</p>
          <p class="desc">拒绝电脑生成名字，拒绝无实力江湖大师！</p>
        </div>
      </div>
    </div>

    <div class="index-block cor-brands">
      <div class="ib-title">
        <p class="name">合作品牌</p>
        <p class="desc">OVERALL SOLUTION</p>
      </div>
      <div class="container aaaaa">
        <div class="boxs">
          <div class="bgPp lefts"></div>
          <div class="bgPp rights"></div>
        </div>

        <!-- <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img :src="cor" alt="">
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img :src="cor" alt="">
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img :src="cor" alt="">
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img :src="cor" alt="">
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img :src="cor" alt="">
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img :src="cor" alt="">
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img :src="cor" alt="">
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img :src="cor" alt="">
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img :src="cor" alt="">
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img :src="cor" alt="">
            </a>
          </li>
        </ul>-->
      </div>
    </div>
  </div>
</template>

<script>
import index01 from "@/assets/images/ic-index01.png";
import arrow from "@/assets/images/index-arrow.png";
import index02 from "@/assets/images/ic-index02.png";
import index03 from "@/assets/images/ic-index03.png";
import index04 from "@/assets/images/ic-index04.png";
import index05 from "@/assets/images/ic-index05.png";
import index06 from "@/assets/images/ic-index06.png";
import index07 from "@/assets/images/ic-index07.png";
import index08 from "@/assets/images/ic-index08.png";
import index09 from "@/assets/images/ic-index09.png";
import video from "@/assets/images/index-video.png";
import play from "@/assets/images/ic-play.png";
import cor from "@/assets/images/demo-cor.png";
export default {
  methods: {
   
    openvideo() {
      this.flag = true;

      var Features = {};
      var target = $("#video")[0];

      var element = $("#video video")[0];

      var NAV = window.navigator;
      var UA = NAV.userAgent.toLowerCase();
      Features.IS_IOS = /ipad|iphone|ipod/i.test(UA) && !window.MSStream;
      // iOS
      Features.hasiOSFullScreen = element.webkitEnterFullscreen !== undefined;

      // W3C
      Features.hasNativeFullscreen = element.requestFullscreen !== undefined;
      // OS X 10.5 can't do this even if it says it can 🙁
      if (Features.hasiOSFullScreen && /mac os x 10_5/i.test(UA)) {
        Features.hasNativeFullscreen = false;
        Features.hasiOSFullScreen = false;
      }
      var IS_CHROME = /chrome/i.test(UA);

      if (IS_CHROME) {
        Features.hasiOSFullScreen = false;
      }
      var playerObj = {};
      enterFullScreen();

      function enterFullScreen() {
        if (
          Features.IS_IOS &&
          Features.hasiOSFullScreen &&
          typeof element.webkitEnterFullscreen === "function" &&
          element.canPlayType("video/mp4")
        ) {
          // alert(2);
          Features.isiOSFullScreen = true;
          console.log("ios全屏");
          setTimeout(function() {
            element.webkitEnterFullscreen();
          }, 0);

          return;
        }
        fakeFullScreen();
      }
      function fakeFullScreen() {
        if (Features.isiOSFullScreen) return;
        if (screenfull.enabled) {
          console.log("浏览器全屏");
          screenfull.toggle(target);
          screenfull.on("change", () => {
            if (screenfull.isFullscreen) {
              playerObj.isFullScreen = true;
              $("body").addClass("body_fullscreen");
            } else {
              playerObj.isFullScreen = false;
              $("body").removeClass("body_fullscreen");
            }
          });
        } else {
          console.log("伪全屏");
          _mockFullscreen();
        }
      }
      function exitFullscreen() {
        fakeFullScreen();
      }
      function _mockFullscreen() {
        var wrapperEl = $("#video .video_wrap");
        var playerEl = $("#video video");
        if (curEl.hasClass("fullscreen_on")) {
          playerObj.isFullScreen = false;
          $("body").removeClass("body_fullscreen");
          curEl.removeClass("fullscreen_on");
        } else {
          playerObj.isFullScreen = true;
          $("body").addClass("body_fullscreen");
          curEl.addClass("fullscreen_on");
        }
      }
    },
    videop() {
      this.flag = true;
      var flag =
        "https://zhubaba-nei.oss-cn-hangzhou.aliyuncs.com/%E8%A7%86%E9%A2%91/%E7%8C%AA%E7%88%B8%E7%88%B8APP%E4%BD%BF%E7%94%A8%E6%88%90%E5%93%81.mp4";
      var str1 =
        '<embed allowscriptaccess="always" ' +
        'type="application/x-shockwave-flash"' +
        'src="../images/player.swf"' +
        'wmode="transparent"' +
        'quality="high"' +
        'allowfullscreen="true"' +
        'flashvars="autostart=true&amp;file=' +
        flag +
        '&amp;width=960&amp;height=540"' +
        'width="960"' +
        'height="540">';
      var str =
        '<object height="540" width="960" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">' +
        ' <param name="AutoStart" value="1" />' +
        ' <param name="quality" value="high" />' +
        ' <param name="FileName" value="' +
        flag +
        '" />' +
        str1;

      (" </object>");
      var stro =
        '<video autoplay controls style="width: 100%; object-fit: contain">' +
        '<source src="' +
        flag +
        '" type="video/mp4">' +
        "</video>";

      if (window.ActiveXObject || "ActiveXObject" in window) {
        $("#video").html(str1);
      } else {
        $("#video").html(stro);
      }
    },
    cVideo() {
      this.flag = false;
      $("#video").html("");
    },
    init(){
      this.$ajax.post('https://api.zhubaba.cn/advertising/adminPcListAdvertising').then(res=>{
        if (res.data.code==0){
            this.bannerPic=res.data.data;
        }else {
          this.$message.error(res.data.msg)
        }
      })
    },
  },
  created(){
    /*(function(m, ei, q, i, a, j, s) {
      m[i] = m[i] || function() {
        (m[i].a = m[i].a || []).push(arguments)
      };
      j = ei.createElement(q),
              s = ei.getElementsByTagName(q)[0];
      j.async = true;
      j.charset = 'UTF-8';
      j.src = 'https://static.meiqia.com/dist/meiqia.js?_=t';
      s.parentNode.insertBefore(j, s);
    })(window, document, 'script', '_MEIQIA');
    _MEIQIA('entId', 186319);
    // 在这里开启无按钮模式（常规情况下，需要紧跟在美洽嵌入代码之后）
    _MEIQIA('manualInit');
    _MEIQIA('init');*/
  },
  mounted() {
    this.init();
  },
  data() {
    return {
      src:
        "https://zhubaba-nei.oss-cn-hangzhou.aliyuncs.com/%E8%A7%86%E9%A2%91/%E7%8C%AA%E7%88%B8%E7%88%B8APP%E4%BD%BF%E7%94%A8%E6%88%90%E5%93%81.mp4",
      flag: false,
      index01,
      arrow,
      index02,
      index03,
      index04,
      index05,
      index06,
      index07,
      index08,
      index09,
      video,
      play,
      cor,
      bannerPic:[]
    };
  }
};
</script>

<style lang="scss" scoped>
// @keyframes loops {
//   0%{
//     background-position-x: 0
//   }
//   100%{
//     background-position-x: 100%
//   }
// }
.aaaaa {
  display: flex;
  align-items: center;
  max-width: 100%;
}
.pc-center {
  cursor: pointer;
}
.boxs {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.bgPp {
  width: 1920px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0%;
  height: 100%;
  // animation: loops 7s linear infinite ;
  transition: 0.3s ease-in;
  background: url(~@/assets/images/img1.jpg) no-repeat center;
}
@keyframes fir {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes sec {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
.lefts {
  animation: fir 20s linear infinite;
}
.rights {
  animation: sec 20s linear infinite;
}
.boxs:hover .bgPp {
  background-image: url(~@/assets/images/img2.jpg);
}
</style>
<style scoped>
@media screen and (min-width: 0px) and (max-width: 900px) {
  .demo {
    display: inline-block;
    top: 35%;
    left: 10%;
    width: 80%;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #fff;
    position: fixed;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
    z-index: 100;
  }
  .item-title{
    text-align: center !important;
    font-size: 48px
  }
  .item-info{
    width: 100% !important;
  }
  .index-banner{
    background-position: top left !important;
  }

  .top-banner{
    background-position: top left !important;
  }
}
@media (min-width: 900px) {
  .demo {
    display: inline-block;
    top: 2%;
    left: 10%;
    width: 80%;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #fff;
    position: fixed;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
    z-index: 100;
  }
}

.video-background {
  position: absolute;
  left: 0px;
  top: 0px;
  background: rgba(0, 0, 0, 0.4);
  width: 100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
  height: 100%;
  filter: alpha(opacity=60); /*设置透明度为60%*/
  opacity: 0.6; /*非IE浏览器下设置透明度为60%*/
  z-index: 10;
}

.demo:hover {
  display: block;
}
.item-title{
  text-align: left;
  font-size: 48px
}
</style>